<template>
    <dzs-form :inline="true" v-model:value="formData" :options="formOptions" @onSearch="onSearch" @onReset="onSearch"></dzs-form>
    <dzs-header-button :rules="['add']" @add="onAdd"></dzs-header-button>
    <dzs-table :list="tableData" :tableHeader="tableHeader" :operation="operations" :maxSize="tableInfo.maxSize"
        :total="tableInfo.total" :tableOptions="tableInfo.tableOptions" :operationOption="tableInfo.operationOption"
        :border="tableInfo.border" :loading="tableInfo.loading" @change="onChange" @onPageChange="onPageChange">
        <template #imgUrl="{ row }">
            <el-image :preview-teleported="true" v-if="!!row.imgUrl" style="width: 50px; height: 50px" :src="row.imgUrl" fit="cover" :preview-src-list="[row.imgUrl]"/>
        </template>
        <template #is_show="{ row }">
            <el-switch :model-value="row.is_show" :active-value="1" :inactive-value="0" active-text="是"
                inactive-text="否" @change="changeSwitch(row)"></el-switch>
        </template>
    </dzs-table>
    <dialog-form :status="status" v-model:isShow="isShow" :dialogData="dialogData" @onHoldSearch="onSearch">
    </dialog-form>
</template>
<script lang="ts" setup>
import { getArticle , delArticle , updataArticle } from "./api/api";
import { getNav } from "../web-nav-manage/api/api"
import { ref, computed, onMounted } from "vue";
import type { TableHeader, operationInstance, dzsTableProps } from "@/components/dzs-table/@types"
import type { dzsFormProps } from "@/components/dzs-form/@types";
import { TABALE_HEADER, operation } from "./config";
import type { tableItem } from "./@types/index";
import type { CommonResponse } from "@/@types";
import { ElNotification, ElMessageBox } from 'element-plus'
import dialogForm from "./components/dialog-form.vue";

const tableHeader = ref<TableHeader[]>(TABALE_HEADER);
const tableData = ref<tableItem[]>([]);
const operations = ref<Array<operationInstance>>(operation);
const tableInfo = ref({
    total: 0,
    maxSize: 10,
    loading: false,
    border: true,
    tableOptions: {
        'row-key': "ID",
        'default-expand-all': true,
        'tree-props': {
            children: 'children',
            hasChildren: 'hasChildren'
        }
    },
    operationOption: {
        fixed: 'right',
        width: "240px"
    }
})

const pageInfo = ref({
    page: 1,
    pageSize: 10
})
const dialogData = ref<tableItem>()

const isShow = ref(false);
const status = ref('add');
const typeList = ref<Array<{label : string, value : any}>>([])
const formData = ref({
    title: "",
    brfie: "",
    type: ""
})

const formOptions = computed<dzsFormProps["formOptions"]>(() => {
    return {
        formProps: {
            "label-width": "100px",
        },
        formItem: [
            {
                label: "标题",
                key: "title",
                type: "input"
            },
            {
                label: "简介",
                key: "brfie",
                type: "input"
            },
            {
                label: "分类",
                key: "type",
                type: "select",
                children: typeList.value
            },
        ]
    }
})

onMounted(() => {
    onSearch();
    onGetNav();
})
const onSearch: dzsFormProps['onSearch'] = () => {
    getArticle({
        page: pageInfo.value.page,
        pageSize: pageInfo.value.pageSize, 
        ...formData.value,
    }).then((res: any) => {
        const result: CommonResponse<tableItem[]> = res;
        let data = result.data.data;
        tableData.value = data;
        tableInfo.value.total = result.data.count
    })
}

const onAdd = () => {
    status.value = 'add';
    isShow.value = true;
    dialogData.value = undefined;
}

const onChange: dzsTableProps<tableItem>['onChange'] = (data) => {
    if (data.status == 'edit') {
        status.value = data.status;
        isShow.value = true;
        dialogData.value = data.data;
    }
    if (data.status == 'details') {
        status.value = data.status;
        isShow.value = true;
        dialogData.value = data.data;
    }
    if (data.status == 'delete') {
        ElMessageBox.confirm('确定删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            delArticle({
                ID: data.data.ID
            }).then((res: any) => {
                const result: CommonResponse<tableItem[]> = res;
                if (result.code == 200) {
                    ElNotification({
                        title: '成功',
                        message: result.message || '删除成功',
                        type: 'success'
                    })
                    onSearch();
                }
            })
        })

    }
}

const onPageChange: dzsTableProps<tableItem>['onPageChange'] = (data) => {
    if (data.status == 'page') {
        pageInfo.value.page = data.data;
        onSearch();
    }
    if (data.status == 'size') {
        pageInfo.value.pageSize = data.data;
        onSearch();
    }
}

const changeSwitch = (data: tableItem) => {
    if (!data.ID) return;
    updataArticle({
        ID: data.ID,
        is_show: data.is_show == 1 ? 0 : 1
    }).then(result => {
        ElNotification({
            title: '成功',
            message: result.message || '操作成功',
            type: 'success'
        })
        onSearch();
    }).catch(() => { })
}

const onGetNav = () => {
    getNav({
        isAdd: true
    }).then(res => {
        const result: CommonResponse<tableItem[]> = res;
        typeList.value = result.data.data.map((item: tableItem) => {
            return {
                label: item.title,
                value: item.ID
            }
        })
    })
}
</script>
<style scoped lang="scss"></style>